<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
    <title>@APPNAME@ User&#39;s Guide, version @VERSION@, 4. Using @APPNAME@</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
 div.c19 {font-size: 80%; text-align: right}
 div.c18 {text-align: center}
 h4.c17 {margin-left: 20px;}
 dl.c16 {margin-left: 20px;}
 span.c15 {font-weight: bold;}
 table.c14 {text-align: left; width: 100%; margin-left: 20px;}
 td.c13 {text-align: left;}
 td.c12 {vertical-align: top; text-align: center;}
 table.c11 {text-align: left;}
 img.c10 {width: 16px; height: 16px;}
 table.c9 {text-align: left; width: 100%;}
 td.c8 {vertical-align: top; width: 60px;}
 img.c7 {width: 24px; height: 24px;}
 table.c6 {text-align: left; width: 1%;}
 td.c5 {vertical-align: top; white-space: nowrap;}
 td.c4 {vertical-align: top;}
 td.c3 {vertical-align: center;}
 span.c2 {font-style: italic;}
 div.c1 {margin-left: 20px;}
</style>
  </head>
  <body lang="en-US">
    <table border="0" width="100%">
      <tr>
        <td align="left">@APPNAME@ User&#39;s Guide</td>
        <td align="right">
        <a href="#top">Top</a> | 
        <a href="Guide.html">Table of Contents</a> | 
        <a href="Guide3.html">Previous</a> | 
        <a href="Guide5.html">Next</a> | 
        <a href="TopicIndex.html">Topic Index</a></td>
      </tr>
    </table>
    <hr />
    <a name="top"></a>
    <h2>
      <a name="sec-4">4. Using @APPNAME@</a>
    </h2>
    <h3>
    <a name="sec-4.1"></a>4.1 Quick Start</h3>
    <div class="c1">
      <p>
      <i>@APPNAME@</i> provides a rich set of features that are very easy
      to use. The usage of most features follows some simple and consist rules.
      The features can be accessed through one of the following ways:
      <br /></p>
      <ul>
        <li>the tool buttons on the tool bar [ 
        <a href="Guide3.html#sec-3.2">see 3.2</a>],
        <br /></li>
        <li>the menus on the menu bar [ 
        <a href="Guide3.html#sec-3.4">see 3.4</a>], or
        <br /></li>
        <li>the templates in the templates panel [ 
        <a href="Guide4.html#sec-4.6">see 4.6</a>].</li>
      </ul>
      <p>The tool buttons on the tool bar can be selected by clicking the left
      mouse button.
      <br /></p>
    </div>
    <h4>
      <a name="sec-4.1.1"></a>4.1.1 Using the Shape Insertion Tools
    </h4>
    <div class="c1">Each diagram or drawing consists of a set of 
    <span class="c2">shapes</span>. The shape insertion tools are for adding
    various types of shapes to a diagram. 
    Open shapes such as segments, quadratic and cubic curve segments, 
    defined by their two end points. 
    The procedure for inserting open shapes is as follows: 
    <ol>
      <li>Select the desired shape insertion tool from the tool bar.</li>
      <li>Move the mouse to one of the end points of the shape on the canvas
	and press the left mouse button.</li>
      <li>Drag the mouse to the other end point of the shape on the canvas and
	release the left mouse button.</li>
    </ol>

    Closed shapes such as rectangles and ellipses are defined by their center points. 
    The procedure for inserting closed shapes is as follows: 
    <ol>
      <li>Select the desired shape insertion tool from the tool bar.</li> 
      <li>Move the mouse to the point on the canvas where the center of the shape shall be 
	located, and click the left mouse button. </li>
    </ol>

    The exceptions are poly-shapes, including polygons, poly-lines,
    poly-curves, and orthogonal lines [see <a href="#4.2.5">4.2.5</a>], 
    and text shapes [see <a href="#4.2.6">4.2.6</a>]. See section 
    <a href="#4.2">4.2</a> for details for inserting each type of these
    shapes.</div>

    <h4>
    <a name="sec-4.1.2"></a>4.1.2 Using the Templates</h4>
    <div class="c1">Shapes can also be added by using the templates in the
      templates panel. Templates are predefined shapes for various
      types of diagrams. 
      The procedure for using the templates is as follows:
      <ol>
	<li>Select the desired template group using the drop-down box at the top
	  of the templates panel.</li>
	<li>Click the left mouse button to choose the desired template shape.</li>
	<li>If the selected template shape is an open shape or an edge in a graph, such as
	  a line or curve segment,
	  <ol type="a">
            <li>move the mouse to one of the end points of the shape on the canvas
              and press the left mouse button;</li>
            <li>drag the mouse to the other end point of the shape on the canvas
              and release the left mouse button.</li>
	  </ol>
	</li>
	<li>If the selected template shape is a closed shape or an node in a graph, such
	  as a rectangle or circle shape, move the mouse to the location of the
	  center of the shape on the canvas and click the left mouse button.</li>
      </ol>
      You may mix shapes from different templates in a diagram.
    </div>
    <h4>
      <a name="sec-4.1.3"></a>4.1.3 Using the Point Tool</h4>
    <div class="c1">The point tool is the most versatile tool. It can perform
    a wide variety of operations.
    <h4>
    <a name="Selecting_and_Deselecting_Shapes"></a>Selecting and Deselecting
    Shapes</h4>The point tool can be used to select and deselect shapes.
    <ol>
      <li>To select a shape, move the mouse over the top of the shape to be
      selected and click the left mouse button.</li>
      <li>To deselect a shape move the mouse pointer off any shape and into the
      space then click the left mouse button.</li>
    </ol>A selected shape is indicated by the 
    <span class="c2">selection marks</span> on the perimeter of the shape, and
    the 
    <span class="c2">rotation mark</span> if the shape is rotatable, as shown
    in the diagram below.
    <br />
    <br />
    <div class="c1">
      <table class="c6" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td class="c3">
              <img src="images/Common/rect-unselected.png" hspace="10"
              vspace="10" />
              <br />
            </td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
              <img src="images/Common/rect-selection.png" hspace="10"
              vspace="10" />
              <br />
            </td>
          </tr>
          <tr>
            <td class="c5">(a) An unselected rectangle.
            <br /></td>
            <td class="c5">
              <br />
            </td>
            <td class="c5">(b) A selected rectangle with selection and rotation
            marks.</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <h4>
    <a name="Editing_Shapes"></a>Editing Shapes</h4>The point tool can also
    perform a wide range of editing operations, such as moving and resizing
    shapes. When the point tool is selected, the mouse cursor changes as it
    moves over various shapes indicating the editing operation available at the
    current location. The following table summarizes the different shapes of
    the mouse cursor of the point tool and the corresponding editing
    operations.
    <br />
    <div class="c1">
      <table class="c9" border="0" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td class="c4" width="30">
              <img src="images/Icons/arrow-cursor.png" class="c7" />
            </td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
            <a name="default_cursor"></a>The default cursor. This indicates
            that the cursor is not over any shape and no operation is available
            through the point tool at the current location.
            <br /></td>
          </tr>
          <tr>
            <td class="c8">
              <img src="images/Icons/move-cursor.png" class="c7" />
            </td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
            <a name="moving_cursor"></a>The moving cursor. This indicates that
            the cursor is on top of a shape. The shape can be moved by dragging
            the mouse.</td>
          </tr>
          <tr>
            <td class="c4" width="30">
            <img src="images/Icons/NS-cursor.png" class="c7" /> 
            <img src="images/Icons/EW-cursor.png" class="c7" />
            <br /></td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
            <a name="edge_resizing_cursor"></a>The edge resizing cursors. This
            indicates that the cursor is on one of the edges of a rectangular
            shape. The edge can be moved by dragging the mouse.</td>
          </tr>
          <tr>
            <td class="c4" width="30">
            <img src="images/Icons/NW-cursor.png" class="c7" /> 
            <img src="images/Icons/NE-cursor.png" class="c7" /></td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
            <a name="corner_resizing_cursor"></a>The corner resizing cursors.
            This indicates that the cursor is on one of the corners of a
            rectangular shape. The corner can be moved by dragging the
            mouse.</td>
          </tr>
          <tr>
            <td class="c4" width="30">
              <img src="images/Icons/hand-cursor.png" class="c7" />
            </td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
            <a name="hand_cursor"></a>The hand cursor. This indicates that the
            cursor is at one of the following locations:
            <ol type="a">
              <li>one of the end points of a line or curve segment, or</li>
              <li>one of the control points of a curve segment, or</li>
              <li>one of the vertices of a poly-shape, or</li>
              <li>the rotation mark (handle) of a rotatable shape.</li>
            </ol>The point or vertex that coincides with the mouse cursor can
            be moved by dragging the mouse.</td>
          </tr>
          <tr>
            <td class="c4" width="30">
              <img src="images/Icons/cross-cursor.png" class="c7" />
            </td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
            <a name="cross_hair_cursor"></a>The cross-hair cursor. This
            indicates that the cursor is on one of edges of a poly-shape.
            <br /></td>
          </tr>
        </tbody>
      </table>
      <br />
    </div>See section 
    <a href="#4.2">4.2</a> for the details of using the point tool for
    manipulating various shapes.
    <h4>
    <a name="Panning_Canvas"></a>Panning the Canvas</h4>Panning is to move the
    viewport of the canvas, i.e., the visible portion of the canvas, by
    dragging the mouse. It allows the view-port of the canvas to be moved
    without using the scrollbars.
    <ol>
      <li>Select the point tool [ 
      <img src="images/point.gif" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse to an open area of the canvas, i.e., not over any
      shape or group.</li>
      <li>Press the left mouse button and drag the mouse in the direction of
      the intended movement of the view-port.</li>
      <li>Release the left mouse button when the desired portion of the canvas
      is visible in the view-port.</li>
    </ol></div>

    <h4>
    <a name="sec-4.1.4"></a>4.1.4 Editing Graphs and Models</h4>
    <div class="c1">
    <span class="c2">@APPNAME@</span> supports two basic editing modes: 
    the <span class="c2">basic</span> mode and 
    the <span class="c2">graph</span> mode. 
    The editing mode is determined based on the type of diagrams you are editing. 
    The <span class="c2">generic diagram</span>
    is the only type of diagrams that is edited in the basic mode. 
    All other types of diagrams are edited in the graph mode. 
    A <span class="c2">graph</span> 
    is a diagram consists of a set of 
    <span class="c2">nodes</span> and a set of 
    <span class="c2">edges</span>. 
    Nodes are often represented as closed shapes, such as rectangles or ellipses. 
    Edges are often represented as open shapes, such as lines or curves. 
    A graph may also contain shapes that neither nodes nor edges, such as text. 
    A generic diagram may contain any kind of shapes. 
    However, certain operations dealing with the graph edges and nodes are only 
    available in the graph mode.   

    <h4>
    <a name="Graph_Shape_Model_Views"></a>Graph, Shape and Model Views</h4>Each
    diagram created by 
    <span class="c2">@APPNAME@</span> is represented by three separate but
    consistent views:
    <br />
    <ul>
      <li>The 
      <span class="c2">shapes</span> view: the set of all shapes in the
      diagrams, including their visual and geometrical attributes.
      <br /></li>
      <li>The 
      <span class="c2">graph</span> view: the graph represented by the set of
      nodes and the set of edges in the diagram and the logical connection
      between the edges and the nodes in the graph. The set of nodes and the
      set of edges are both subset of the shapes in the shapes view.
      <br /></li>
      <li>The 
      <span class="c2">semantic model</span> view (model view for short): the
      semantic model that consists of the local entities represented by the
      shapes in the drawing. For example, a drawing of a UML class diagram
      defines a semantic model of a UML class diagram that consists of logical
      entities such as classes and associations represented by the rectangle or
      line shapes in the drawing.
      <br /></li>
    </ul>The document tree panel contains tabs for showing the shapes views or
    the graph view. If a shape has an associated semantic model, the semantic
    properties of the model will be displayed in the 
    <span class="c2">model attribute panel</span> when the shape is selected.
    The semantic properties in the model attribute panel are editable.
    <table>
      <tr>
        <td>a) the shape view</td>
        <td></td>
        <td>b) the graph view</td>
        <td></td>
        <td>c) the model view</td>
      </tr>
      <tr>
        <td>
          <img src="images/Windows/navigator-shapes.png" name="avm-doc-shape"
          border="0" />
        </td>
        <td></td>
        <td>
          <img src="images/Windows/navigator-graph.png" name="avm-doc-graph"
          border="0" />
        </td>
        <td></td>
        <td valign="top">
          <img src="images/Windows/attribute-model.png" name="avm-attr-model"
          border="0" />
        </td>
      </tr>
    </table>

    <h4>
    <a name="Smart-Connection"></a>Smart Connection of Graph Nodes and Edges</h4>

    The 
    <span class="c2">smart connection</span> feature of 
    <span class="c2">@APPNAME@</span> allows you to edit graphs with ease.
    The 
    <span class="c2">smart connection</span> feature
    is only available in the graph mode. 
    The basic rules for editing graphs are as follows:
    <br />
    <ul>
      <li>Moving an end of a graph edge inside a graph node will connect the
	edge to node. The end point of the edge will be automatically adjusted to
	touch a point on the boundary of the node, known as the connection point.
	The connection point can be adjusted by moving the end point of the edge
	to different locations inside the node.
      <br /></li>
      <li>Moving an end of a graph edge that is connected to a graph node
	outside the node it is connected to will disconnect the edge from the
	node.
	<br /></li>
      <li>Moving a graph node on top of a dangling end of a graph edge will
	connect the edge to the node. The end point of edge will also be
	automatically adjusted to a connection point on the boundary of the
	node.</li>
      <li>When a graph node is a compound node or hyper node, it may contain
	other graph nodes as sub-nodes. Moving a graph node inside a hyper node
	will make the node a sub-node of the hyper node. Moving a sub-node
	outside its parent node makes the node no longer a sub-node of its parent
	node.
	<br /></li>
      <li>Moving, i.e., dragging, a graph node will pull all the edges
	connected to the node with all the edge connected to the node remain
	connected to the node. If the node is a hyper node, all the sub-nodes
	will be moved along with hyper node and all the sub-nodes will remain as
	sub-nodes.
	<br /></li>
      <li>Moving, i.e., dragging, a graph edge that is connected to graph nodes
	at one or both ends will also pull the connected graph nodes. The edge
	and the nodes will remain connected.
	<br />
      </li>
    </ul>
    </div>

    <h4>
    <a name="sec-4.1.5"></a>4.1.5 Switching Tabs and Overviews</h4>

    <div class="c1">
      When you edit multiple diagrams, each diagram is represented as a tab in the canvas panel. 
      There are several ways to switch between different diagrams. 
      <ul>
	<li>
	  You can switch between different diagrams by selecting the tabs at the top of the 
	  canvas panel. </li>
	<li>Each diagram is a represented as a node in the project tree inside the Project tab of
	  the Navigator. You can select the corresponding node in the project tree to 
	  switch between diagrams and display the selected diagram in the canvas area. </li>
	<li>You can press the Ctrl key along with the left or right arrow to display 
	  an overview of the current tab and its left and right neighbors, as shown below. 
	  Use the Ctrl left/right key to cycle through the tabs, and release the keys with 
	  the tab you want to select is at the center.
	  <br/>
	  <img src="images/Common/tab-switching.png" hspace="10" vspace="10" />
	</li>
	<li>The overview icon at the top left corner of the canvas area will display a 
	  thumbnail overview of all the tabs. Hovering the mouse on the thumbnail of a tab 
	  will display an enlarged overview of the tab, as shown below. 
	  Click the left mouse button to select the tab to be displayed.

	  <table class="c9" cellpadding="2" cellspacing="2">
	    <tbody>
              <tr>
		<td class="c4">
		  <img src="images/Common/tab-overview-icon.png" hspace="10" vspace="10" />
		  <br />
		</td>
              </tr>
              <tr>
		<td class="c4">a) The tab overview icon.</td>
              </tr>
              <tr>
		<td class="c4">&nbsp;</td>
              </tr>
              <tr>
		<td class="c4">
		  <img src="images/Common/tab-overview.png" hspace="10" vspace="10" />
		  <br />
		</td>
              </tr>
              <tr>
		<td class="c4">b) The tab overview display.</td>
              </tr>
	    </tbody>
	  </table>
	  
	</li>    
      </ul>
    </div>


    <h3>
    <a name="sec-4.2"></a>4.2 The Basic Shapes</h3>
    <div class="c1">This section will cover the details of using the shape
    insertion tools and the point tool to draw and edit various types of
    shapes. The following types of shapes are supported:
    <br />
    <ul>
      <li>line segments</li>
      <li>curve segments, including quadratic curves and cubic curves</li>
      <li>rectangular shape, including rectangles,
	round-cornered rectangles, and ellipses</li>
      <li>circles</li>
      <li>poly-shapes, including polygons, poly-lines, poly-curves, and
      orthogonal lines</li>
      <li>text shapes</li>
    </ul>Shapes can be added to a drawing using the corresponding shape
    insertion tools on the 
    <a href="Guide3.html#sec-3.2">tool bar</a>. Shapes can be moved, resized,
    or edited at any time using the point tool.</div>
    <h4>
    <a name="sec-4.2.1"></a>4.2.1 Line Segments</h4>
    <div class="c1">A line segment is a straight line between two end points,
    as shown in the diagram below. The location of a line segment is determined
    by its end points.
    <br />
    <img src="images/Common/line-shape.png" hspace="20" vspace="20" />
    <br /></div>
    <div class="c1">
      <h4>
      <a name="Adding_a_Line_Segment"></a>Adding a Line Segment</h4>
      <ol>
        <li>Select the line tool [ 
        <img src="images/Common/line.png" />] from the tool bar.</li>
        <li>Move the mouse to one end of the line segment and press the left
        mouse button.</li>
        <li>Drag the mouse to the other end of the line segment and release the
        left mouse button.</li>
      </ol>
      <h4>
      <a name="Moving_a_Line_Segment"></a>Moving a Line Segment</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the line segment to be moved, and the
        mouse cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the line segment is at the
        desired location.
        <br /></li>
      </ol>
      <h4>
      <a name="Moving_the_End_Points_of_a_Line_Segment"></a>Moving the End
      Points of a Line Segment</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the end point to be moved, and the mouse cursor
        changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the end point is at the desired
        location.
        <br /></li>
      </ol>
    </div>
    <h4>
    <a name="sec-4.2.2"></a>4.2.2 Curve Segments</h4>
    <div class="c1">The location of a quadratic or cubic curve segment curve is
    determined by its end points and the shape of a curve segment is determined
    by its control point(s). A quadratic curve segment has one control point,
    and a cubic curve segment has two control points, as shown in the diagrams
    below.
    <br />
    <br />
    <table class="c9" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c4">
            <img src="images/Common/arc-shape.png" hspace="10" vspace="10" />
            <br />
          </td>
          <td class="c4">
            <img src="images/Common/curve-shape.png" hspace="10" vspace="10" />
            <br />
          </td>
        </tr>
        <tr>
          <td class="c4">A quadratic curve segment.</td>
          <td class="c4">A cubic curve segment.</td>
        </tr>
      </tbody>
    </table></div>
    <div class="c1">
      <h4>
      <a name="Adding_a_Curve_Segment"></a>Adding a Curve Segment</h4>
      <ol>
        <li>Select the quadratic curve tool [ 
        <img src="images/Common/arc.png" />] or the cubic curve tool [ 
        <img src="images/Common/curve.png" />] from the tool bar.</li>
        <li value="2">Move the mouse to one end of the curve segment and press
        the left mouse button.</li>
        <li>Drag the mouse to the other end of the curve segment and release
        the left mouse button.</li>
        <li>Move the control point(s), if necessary (see 
        <a href="#Moving_the_Control_Points_of_a_Curve_Segment">Moving the
        Control Points of a Curve Segment</a>).
        <br /></li>
      </ol>
      <h4>
      <a name="Moving_a_Curve_Segment"></a>Moving a Curve Segment</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the curve segment to be moved, and the
        mouse cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the curve segment is at the
        desired location.
        <br /></li>
      </ol>
      <h4>
      <a name="Moving_the_End_Points_of_a_Curve_Segment"></a>Moving the End
      Points of a Curve Segment</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the end point to be moved, and the mouse cursor
        changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the end point is at the desired
        location.
        <br /></li>
      </ol>
      <h4>
      <a name="Moving_the_Control_Points_of_a_Curve_Segment"></a>Moving the
      Control Points of a Curve Segment</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the control point to be moved, and the mouse
        cursor changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the control point is at the
        desired location.
        <br /></li>
      </ol>
    </div>
    <h4>
    <a name="sec-4.2.3"></a>4.2.3 Rectangular Shapes</h4>
    <div class="c1">
      The rectangular shapes include rectangles, round-cornered
      rectangles, ellipses, and all the rectangular polygons
      (triangle, diamond, trapezoid, parallelogram, convex and concave
      pentagons, hexagon, and octagon).  Each rectangular shape has
      four edges and four corners, as shown in the diagrams below. If
      a rectangular shape is rotatable, the rotation mark is
      shown. All rectangular shapes are handled in a similar way. In
      the case of a round-cornered rectangle and ellipse, the
      rectangle refers to the bounding rectangle of the round-cornered
      rectangle or ellipse. The selections marks in the diagrams below
      mark the bounding rectangles.  <br />
    <table class="c9" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c3">
            <img src="images/Common/rect-shape.png" hspace="10" vspace="10" />
            <br />
          </td>
        </tr>
        <tr>
          <td class="c4">(a) A rectangle.</td>
        </tr>
        <tr>
          <td class="c3">
            <img src="images/Common/rrect-shape.png" hspace="10" vspace="10" />
            <br />
          </td>
        </tr>
        <tr>
          <td class="c4">(b) A round cornered rectangle.</td>
        </tr>
        <tr>
          <td class="c3">
            <img src="images/Common/oval-shape.png" hspace="10" vspace="10" />
            <br />
          </td>
        </tr>
        <tr>
          <td class="c4">(c) An ellipse.</td>
        </tr>
        <tr>
          <td class="c3">
            <img src="images/Common/regular-polygons.png" hspace="10" vspace="10" />
            <br />
          </td>
        </tr>
        <tr>
          <td class="c4">(d) Regular polygons.</td>
        </tr>
      </tbody>
    </table></div>
    <div class="c1">

      <h4>
      <a name="Adding_a_Rectangular_Shape"></a>Adding a Rectangular Shape</h4>
      <ol>
        <li>Select one of the following rectangular shape insertion tools from
        the tool bar.
        <ul>
          <li>the rectangle tool 
	    [<img src="images/Common/rect.png" />]</li>
          <li>the round-cornered rectangle tool 
	    [<img src="images/Common/rrect.png" />]</li>
          <li>the ellipse tool 
	    [<img src="images/Common/oval.png" />]</li>

	  <li>the triangle tool 
            [<img src="images/Common/triangle.png"/>]</li>
	  <li>the diamond tool
            [<img src="images/Common/diamond.png"/>]</li>
	  <li>the trapezoid tool
            [<img src="images/Common/trapezoid.png"/>]</li>
	  <li>the parallelogram tool
            [<img src="images/Common/parallelogram.png" />]</li>
	</ul>
	</li>
        <li>
	  Move the mouse to the point on the canvas where the center
          of the shape shall be located, and click the left mouse
          button. 
	</li>
      </ol>
      <h4>
      <a name="Moving_a_Rectangular_Shape"></a>Moving a Rectangular Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the rectangular shape to be moved, and the
        mouse cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the rectangular shape is at the
        desired location.
        <br /></li>
      </ol>
      <h4>
      <a name="Resizing_a_Rectangular_Shape_by_Edges"></a>Resizing a
      Rectangular Shape by the Edges</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the edge to be moved, and the mouse cursor
        changes to the 
        <a href="#edge_resizing_cursor">edge resizing cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse. The mouse movement
        is constrained either horizontally or vertically.</li>
        <li>Release the left mouse button when the edge is at the desired
        position.
        <br /></li>
      </ol>
      <h4>
      <a name="Resizing_a_Rectangular_Shape_by_Corners"></a>Resizing a
      Rectangular Shape by the Corners</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the corner to be moved, and the mouse cursor
        changes to the 
        <a href="#corner_resizing_cursor">corner resizing cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse. The mouse can move
        without constrain, horizontally and vertically.</li>
        <li>Release the left mouse button when the corner is at the desired
        location.
        <br /></li>
      </ol>
      <h4>
      <a name="Rotating_a_Rectangular_Shape"></a>Rotating a Rectangular
      Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the rotation mark, and the mouse cursor changes
        to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse. The mouse can move
        without constrain, horizontally and vertically.</li>
        <li>Release the left mouse button when the desired rotation angle is
        reached.
        <br /></li>
      </ol>

    </div>

    <h4>
    <a name="sec-4.2.4"></a>4.2.4 Circles</h4>
    <div class="c1">The location and size of a circle can be set by two points:
    the center of the circle and any point on its circumference.
    <br />
    <img src="images/Common/circ-shape.png" hspace="20" vspace="20" /></div>
    <div class="c1">
      <h4>
      <a name="Adding_a_Circle"></a>Adding a Circle</h4>
      <ol>
        <li>Select the circle tool [ 
        <img src="images/Common/circle.png" />] from the tool bar.</li>
        <li>Move the mouse to the point on the canvas where the center
          of the shape shall be located, and click the left mouse
          button.</li>
      </ol>
      <h4>
      <a name="Moving_a_Circle"></a>Moving a Circle</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the circle to be moved, and the mouse
        cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the circle is at the desired
        location.
        <br /></li>
      </ol>
      <h4>
      <a name="Resizing_a_Circle"></a>Resizing a Circle</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse to any point on the circumference of the circle to
        be resized, and the mouse cursor changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the circle is of the desired
        size.
        <br /></li>
      </ol>
    </div>
    <h4>
    <a name="sec-4.2.5"></a>4.2.5 Poly-Shapes</h4>
    <div class="c1">
      <p>
      <i>Poly-shapes</i> include polygons (irregular), 
      poly-lines, poly-curves, and
      orthogonal lines. Poly-Lines, poly-curves, and orthogonal lines are known
      as 
      <i>open poly-shapes</i>. Each poly-shape is defined by a series of two or
      more vertices. For an open poly-shape, the first vertex is known as the
      anchor vertex.</p>
      <p>A 
      <i>polygon</i> is a closed poly-shape that the adjacent vertices are
      connected by a line segment, and the last and the first vertex, i.e., the
      anchor vertex, are also connected by a line segment. A 
      <i>poly-line</i> is an open poly-shape that the adjacent vertices are
      connected by a line segment, but no line segment connecting the last
      vertex and the anchor vertex. A 
      <i>poly-curve</i> is an open poly-shape that the adjacent vertices are
      connected by a cubic curve segment. An 
      <i>orthogonal line</i> is an open poly-shape that consists of alternating
      horizontal and vertical line segments that pass through the corresponding
      vertices.</p>
    </div>
    <div class="c1">
      <table class="c9" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td class="c4">
              <img src="images/Common/polygon-shape.png" hspace="10"
              vspace="10" />
              <br />
            </td>
            <td class="c4">
              <img src="images/Common/polyline-shape.png" hspace="10"
              vspace="10" />
              <br />
            </td>
          </tr>
          <tr>
            <td class="c4">(a) A polygon (irregular).
            <br /></td>
            <td class="c4">(b) A poly-line.
            <br /></td>
          </tr>
          <tr>
            <td class="c4">
              <img src="images/Common/polycurve-shape.png" hspace="10"
              vspace="10" />
              <br />
            </td>
            <td class="c4">
              <img src="images/Common/ortholine-shape.png" hspace="10"
              vspace="10" />
              <br />
            </td>
          </tr>
          <tr>
            <td class="c4">(c) A poly-curve.
            <br /></td>
            <td class="c4">(d) An orthogonal line.
            <br /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c1">
      <h4>
      <a name="Adding_a_Poly-Shape"></a>Adding a Poly-Shape</h4>
      <ol>
        <li>Select the poly-shape insertion tools from the tool bar.
        <ul>
          <li>the polygon tool [ 
          <img src="images/Common/polygon.png" />]</li>
          <li>the poly-line tool [ 
          <img src="images/Common/polyline.png" />]</li>
          <li>the poly-curve tool [ 
          <img src="images/Common/polycurve.png" />]</li>
          <li>the orthogonal line tool [ 
          <img src="images/Common/orthline.png" />]</li>
        </ul></li>
        <li>Move the mouse to the anchor vertex or the first vertex of the
        poly-shape and click the left mouse button.</li>
        <li>Move the mouse to the next vertex of the poly-shape and click the
        left mouse button. Repeat this step as many times as needed.</li>
        <li>Move the mouse to the last vertex of the poly-shape and click the
        right mouse button.</li>
      </ol>
      <h4>
      <a name="Moving_a_Polygon"></a>Moving a Polygon</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the polygon to be moved, and the mouse
        cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the polygon is at the desired
        location.
        <br /></li>
      </ol>
      <h4>
      <a name="Moving_an_Open_Poly-Shape"></a>Moving an Open Poly-Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the anchor vertex of the poly-shape to be
        moved, and the mouse cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the poly-shape is at the desired
        location.
        <br /></li>
      </ol>
      <h4>
      <a name="Moving_the_Vertices_of_a_Poly-Shape"></a>Moving the Vertices of
      a Poly-Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the vertex to be moved, and the mouse cursor
        changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the vertex is at the desired
        location.</li>
      </ol>
      <h4>
      <a name="Moving_the_Control_Points_of_a_Poly-Curve"></a>Moving the
      Control Points of a Poly-Curve</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the control point to be moved, and the mouse
        cursor changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the control point is at the
        desired location.
        <br /></li>
      </ol>
      <h4>
      <a name="Adding_Vertices_to_a_Poly-Shape"></a>Adding Vertices to a
      Poly-Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse over the segment of the poly-shape where the new vertex 
	  is to be added, and the mouse cursor changes to the
          <a href="#cross_hair_cursor">cross hair cursor</a>.
        <br /></li>
        <li>Either
	  <ol type="a">
	    <li>double click the left mouse button to add a new vertex, or </li>
	    <li>hover the mouse for one second and a green button with a “+” sign will appear, 
	      click on the “+” button to add a new vertex.</li> 
	  </ol>
	</li>
      </ol>
      <h4>
      <a name="Removing_Vertices_from_a_Poly-Shape"></a>Removing Vertices from
      a Poly-Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near vertex to be removed, and the mouse cursor
        changes to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Either
	  <ol type="a">
	    <li>double click the left mouse button to remove the vertex, or </li>
	    <li>hover the mouse for one second and a red button with a “-” sign will appear, 
	      click on the “-” button to remove the vertex.</li> 
	  </ol>
	</li>
      </ol>
    </div>

    <h4>
    <a name="sec-4.2.6"></a>4.2.6 Text Shapes</h4>
    <div class="c1">A text shape consists of one or more lines of text. The
    location of the text shape is determined by the anchor point at the left
    end of the baseline of the text shape, as shown in the diagram below. The
    selection marks of a text shape indicate the baseline of the text shape.
    The insertion cursor indicates the position at which the next character
    will be inserted.
    <br />
    <img src="images/Common/text-shape.png" />
    <br /></div>
    <div class="c1">
    <h4>
    <a name="Adding_a_Text_Shape"></a>Adding a Text Shape</h4>
    <ol>
      <li>Select the text tool [ 
      <img src="images/Icons/text.png" />] from the tool bar.</li>
      <li>Move the mouse to the baseline anchor point of the text shape and
      click the left mouse button. The insertion cursor will appear.</li>
      <li>Use the keyboard to input characters. (see 
      <a href="#Editing_a_Text_Shape">Editing a Text Shape Using the
      Keyboard</a>)</li>
    </ol>
    <h4>
    <a name="Editing_a_Text_Shape"></a>Editing a Text Shape Using the
    Keyboard</h4>When a text shape is selected and the insertion cursor
    appears, you may use the following keys to edit the content of the text
    shape:
    <ul>
      <li>The left arrow, right arrow, Home, and End keys will move the
      insertion cursor.</li>
      <li>The Backspace key deletes the character before the insertion
      cursor.</li>
      <li>The Delete key deletes the character after the insertion cursor.</li>
      <li>The Enter or Return key inserts a new line of text after the current
      line.</li>
      <li>The up arrow and down arrow keys will move the insertion cursor to
      the previous and the next line of text, respectively.</li>
    </ul>
    <h4>
    <a name="Selecting_a_Text_Shape"></a>Selecting a Text Shape for
    Editing</h4>
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse on top of the text shape to be edited and place the
      mouse pointer near the desired location for the insertion cursor.</li>
      <li>Click the left mouse button. The insertion cursor should appear at
      the nearest position to the mouse pointer.</li>
      <li>Use the keyboard to edit the text shape. (see 
      <a href="#Editing_a_Text_Shape">Editing a Text Shape Using the
      Keyboard</a>)</li>
    </ol>
    <h4>
    <a name="Setting_Text_Style"></a>Setting Text Style</h4>Text shapes can be
    displayed in different styles, including bold, italic, underlined, or any
    combination of the above.
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse on top of the text shape whose style is to be changed,
      and click the left mouse button.</li>
      <li>Click on one or more of text style icons ( 
      <img src="images/Icons/text-bold.png" border="0" /> 
      <img src="images/Icons/text-italic.png" border="0" /> 
      <img src="images/Icons/text-underline.png" border="0" />) on the tool bar
      to set the style of the text.</li>
    </ol>The selected text style setting will become the default text style
    setting for all text shapes added subsequently.
    <h4>
    <a name="Aligning_a_Multi-line_Text_Shape"></a>Aligning a Multi-line Text
    Shape</h4>Multi-line text can be aligned left, right, or centered as shown
    below.
    <table class="c11" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c4">
            <img src="images/Common/text-left.png" hspace="10" vspace="10" />
            <br />
          </td>
          <td class="c4">
            <img src="images/Common/text-center.png" hspace="10" vspace="10" />
            <br />
          </td>
          <td class="c4">
            <img src="images/Common/text-left.png" hspace="10" vspace="10" />
            <br />
          </td>
        </tr>
        <tr>
          <td>(a) Aligned left</td>
          <td>(b) Centered</td>
          <td>(c) Aligned left</td>
        </tr>
      </tbody>
    </table>
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse on top of the multi-line text shape to be aligned and
      click the left mouse button.</li>
      <li>Click on one of text alignment icons ( 
      <img src="images/Icons/align-left.gif" border="0" /> 
      <img src="images/Icons/align-center.gif" border="0" /> 
      <img src="images/Icons/align-right.gif" border="0" />) on the tool bar to
      align the text.</li>
    </ol>The selected alignment setting will become the default alignment
    setting for all text shapes added subsequently.
    <h4>
    <a name="Moving_a_Text_Shape"></a>Moving a Text Shape</h4>
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse on top of the text shape to be moved, and the mouse
      cursor changes to the 
      <a href="#moving_cursor">moving cursor</a>.</li>
      <li>Press the left mouse button and drag the mouse.</li>
      <li>Release the left mouse button when the text shape is at the desired
      location.</li>
    </ol>
    <h4>
    <a name="Rotating_a_Text_Shape"></a>Rotating a Text Shape</h4>
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse near the rotation point on the baseline opposite to
      the anchor point, i.e. the right end of the baseline when the text is in
      its unrotated position (see the diagram below), and the mouse cursor
      changes to the 
      <a href="#hand_cursor">hand cursor</a>.</li>
      <li>Press the left mouse button and drag the mouse.</li>
      <li>Release the left mouse button when the desired rotation angle is
      reached.</li>
    </ol>
    <table class="c11" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c3">
            <img src="images/Common/text-rotate1.png" />
            <br />
          </td>
          <td class="c3">
            <img src="images/Common/text-rotate2.png" />
            <br />
          </td>
          <td class="c3">
            <img src="images/Common/text-rotate3.png" />
            <br />
          </td>
        </tr>
      </tbody>
    </table>

    <h4>
    <a name="Deleting_a_Text_Shape"></a>Deleting a Text Shape</h4>
    There are
    several ways to delete a text shape.
    <ol>
      <li>Select the text shape to be deleted.</li>
      <li>Click on the deletion tool [ 
      <img src="images/Icons/trash.gif" class="c10" />] on the tool bar, or
      select from the menu bar: Edit | Cut, or</li>
      <li>Hold the SHIFT key and press the DEL key.
      <br /></li>
    </ol>Press the DEL key without holding the SHIFT key will edit the content
    of the text shape.


    <h4>
    <a name="Text_Shape_Label"></a>Using Text Shapes as Labels</h4>
    
    Text shapes can be used as labels of graph nodes and edges. The labels
    attached to nodes or edges and will move with the nodes or edges.

    <table class="c11" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c3">
            <img src="images/Common/graph-label.png" />
            <br />
          </td>
        </tr>
	<tr>
	  <td>Text labels of graph nodes and edges.</td>
	</tr>
      </tbody>
    </table>    

    <ul>
      <li>To attach a text shape to a graph node as a label, drag and drop
	the text inside the graph node. You can also adjust the position
	of the label by moving it inside the node.</li>

      <li>To attach a text shape to a graph edge as a label, drag and drop
	the text shape over the graph edge. You can also adjust the
	position of the label by position it near the edge.</li>

      <li>To detach a text shape from a graph node, drag the text shape
	outside the graph node.</li>

      <li>To detach a text shape from a graph edge, drag the text shape away
	from the graph edge.</li>
    </ul>

    <br /></div>

    <h4>
    <a name="sec-4.2.7"></a>4.2.7 Image Shapes</h4>
    <div class="c1">
      <i>@APPNAME@</i> supports importing images to your
      diagrams. Both raster image files (GIF and PNG) and vector
      images files (SVG) are supported. Images shapes are treated as
      rectangular shapes, and can be manipulated in the same way as
      rectangular shapes.
      <br/>
      <table class="c6" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td class="c3">
              <img src="images/Common/image-shape.png" hspace="10"
              vspace="10" />
              <br />
            </td>
            <td class="c4">
              <br />
            </td>
            <td class="c4">
              <img src="images/Common/svg-shape.png" hspace="10"
              vspace="10" />
              <br />
            </td>
          </tr>
          <tr>
            <td class="c5">(a) A raster image shape.
            </td>
            <td class="c5">
            </td>
            <td class="c5">(b) A vector image shape. 
            </td>
          </tr>
        </tbody>
      </table>

      <h4>
      <a name="Adding_a_Image_Shape"></a>Adding an Image Shape</h4>
      <ol>
        <li>Select one of the following image insertion tools from
        the tool bar.
        <ul>
          <li>the raster image tool 
	    [<img src="images/Icons/image.png" />]</li>
          <li>the vector image tool 
	    [<img src="images/Icons/svgimage.png" />]</li>
        </ul></li>
	<li>A file dialog will popup. Select the image file to be inserted 
	using the file dialog. Click "Open".</li>
        <li>
	  Move the mouse to the point on the canvas where the center
          of the image shall be located, and click the left mouse
          button. 
	</li>
      </ol>
      <h4>
      <a name="Moving_a_Image_Shape"></a>Moving an Image Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the image shape to be moved, and the
        mouse cursor changes to the 
        <a href="#moving_cursor">moving cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse.</li>
        <li>Release the left mouse button when the image shape is at the
        desired location.
        <br /></li>
      </ol>
      <h4>
      <a name="Resizing_a_Image_Shape_by_Edges"></a>Resizing an
      Image Shape by the Edges</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse on top of the edge to be moved, and the mouse cursor
        changes to the 
        <a href="#edge_resizing_cursor">edge resizing cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse. The mouse movement
        is constrained either horizontally or vertically.</li>
        <li>Release the left mouse button when the edge is at the desired
        position.
        <br /></li>
      </ol>
      <h4>
      <a name="Resizing_a_Image_Shape_by_Corners"></a>Resizing an
      Image Shape by the Corners</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the corner to be moved, and the mouse cursor
        changes to the 
        <a href="#corner_resizing_cursor">corner resizing cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse. The mouse can move
        without constrain, horizontally and vertically.</li>
        <li>Release the left mouse button when the corner is at the desired
        location.
        <br /></li>
      </ol>
      <h4>
      <a name="Rotating_a_Image_Shape"></a>Rotating an Image
      Shape</h4>
      <ol>
        <li>Select the point tool [ 
        <img src="images/Icons/point.png" class="c10" />] from the tool bar.
        <br /></li>
        <li>Move the mouse near the rotation mark, and the mouse cursor changes
        to the 
        <a href="#hand_cursor">hand cursor</a>.</li>
        <li>Press the left mouse button and drag the mouse. The mouse can move
        without constrain, horizontally and vertically.</li>
        <li>Release the left mouse button when the desired rotation angle is
        reached.
        <br /></li>
      </ol>
    
    </div>

    <h3>
    <a name="sec-4.3"></a>4.3 Using Templates</h3>
    <h4>
    <a name="sec-4.3.1"></a>4.3.1 Selecting Templates</h4>
    <div class="c1">
      Currently the followin templates for various types of diagrams are supported:
      <ul>
	<li>
	  <a href="Templates.html#sec-Template_UML_Class">
            <i>UML - Class</i>
	  </a> : this template includes the nodes and edges that are used in
	  the class diagram of UML2.</li>
	<li>
	  <a href="Templates.html#sec-Template_UML_Package">
            <i>UML - Package</i>
	  </a> : this template includes the nodes and edges that are used in
	  the package diagram of UML2.</li>
	<li>
	  <a href="Templates.html#sec-Template_UML_UseCase">
            <i>UML - Use Case</i>
	  </a> : this template includes the nodes and edges that are used in
	  the use case diagram of UML2.</li>
	<li>
	  <a href="Templates.html#sec-Template_UML_Sequence">
            <i>UML - Sequence</i>
	  </a> : this template includes the nodes and edges that are used in
	  the sequence diagram of UML2.</li>
	<li>
	  <a href="Templates.html#sec-Template_UML_State">
            <i>UML - State</i>
	  </a> : this template includes the nodes and edges that are used in
	  the state diagram of UML2.</li>
	<li>
	  <a href="Templates.html#sec-Template_UML_Activity">
            <i>UML - Activity</i>
	  </a> : this template includes the nodes and edges that are used in
	  the activity diagram of UML2.</li>
	<li>
	  <a href="Templates.html#sec-Template_FlowChart">
            <i>Flow Graph Diagram</i>
	  </a> : this template includes the common nodes and links in
	  conventional flow graph diagrams.</li>
	<li>
	  <a href="Templates.html#sec-Template_Graph">
            <i>Generic Diagram</i>
	  </a> : this template includes the most commonly used nodes and
	  links in technical diagrams.</li>
      </ul>

      The desired template can be selected using the drop-down box at
      the top of the templates panel.
      <br />
      <div class="c1">
	<br />
	<img src="images/Common/select-templates.png" />
	<br />
	<br />
      </div>
      A diagram may use shapes from several different templates as
      well as the basic generic shapes from the tool bar (see 
      <a href="#4.2">4.2</a>).
    </div>
    <h4>
    <a name="sec-4.3.2"></a>4.3.2 Adding a Shape from a Template</h4>

    <div class="c1">
    <h4>
    <a name="Adding_from_a_Node_Template"></a>Adding a Cloased Shape (Graph Node) from a
    Template</h4>
    <ol>
      <li>Select the desired template using the drop-down box at the top
      of the templates panel.</li>
      <li>Click the left mouse button to choose the desired template
	shape.</li>
      <li>Move the mouse to the desired location of the center of the shape on
      the canvas, and click the left mouse button to add the shape.</li>
    </ol>
    After the desired shape is added, the current tool is automatically
    switched to the point tool. So the newly added shape can be easily moved
    or resized after insertion.
    After selecting the template shape, you may also click the right mouse button to cancel the 
    insertion operation, and the current tool is switched back to the point tool.
    <br />
    <h4>
    <a name="Adding_from_an_Edge_or_Link_Template"></a>Adding an Open Shape (Graph Edge)
    from a Template</h4>
    <ol>
      <li>Select the desired template using the drop-down box at the top
      of the templates panel.</li>
      <li>Click the left mouse button to choose the desired template
      shape.</li>
      <li>Move the mouse to one of the end points of the edge or link on the
      canvas, and press the left mouse button;</li>
      <li>Drag the mouse to the other end point of the edge or link on the
      canvas and release the left mouse button.</li>
    </ol>
    After the desired shape is added, the current tool is automatically
    switched to the point tool. So the newly added shape can be easily moved
    or resized after insertion.
    After selecting the template shape, you may also click the right mouse button to cancel the 
    insertion operation, and the current tool is switched back to the point tool.
    <h4>
    <a name="Adding_Multiple_Instancs_from_a_Node_Template"></a>Adding Multiple
    Instances of a Template Shape</h4>

    It is not necessary to select a template shape
    every time to add additional instances of a shape from the same template.
    <ul>
      <li>To add additional instances of the last node or text template, move
	the mouse to the desired location, hold down the CTRL and SHIFT keys
	simultaneously and click the left mouse button.</li>
      <li>To add additional instances of the last edge or link template, move
	the mouse to the desired location, hold down the CTRL and SHIFT keys
	simultaneously and click, drag, then release the left mouse button.</li>
    </ul></div>
    <h4>
    <a name="sec-4.3.3"></a>4.3.3 Editing Text Labels of Graph Nodes or
    Edges</h4>
    <div class="c1">
      <h4>
      <a name="Adding_from_a_Text_Template"></a>Editing the Text of a
      Label</h4>
      <ol>
        <li>The initial prompt of a text label appears in light gray color, as
        shown in illustration a) below.</li>
        <li>Move the mouse on top of the prompt and click the left mouse
        button.
        <br /></li>
        <li>Use the keyboard to input characters. The initial prompt will be
        replaced by characters typed, as shown in illustration b) below.</li>
      </ol>
      <table class="c11" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td class="c12">
              <img src="images/Common/class1.png" />
              <br />
            </td>
            <td class="c12">
              <img src="images/Common/class2.png" />
              <br />
            </td>
          </tr>
          <tr>
            <td class="c4">a) the initial prompt of the class name
            <br />label of a UML class node.</td>
            <td class="c4">b) the class name label
            <br />after being edited.</td>
          </tr>
        </tbody>
      </table>
      <br />
      <h4>
      <a name="Adjust_Label_Position"></a>Adjusting the Positions of Text
      Labels of Graph Nodes or Edges</h4>
      <ol>
        <li>Move the mouse on top of the text label to be moved, and the mouse
        cursor changes to the 
        <a href="Guide4.html#sec-moving_cursor">moving cursor</a>.</li>
        <li>While holding down the ALT key, press the left mouse button and
        drag the mouse.</li>
        <li>Release the left mouse button and the ALT key when the text label
        is at the desired location.</li>
      </ol>
    </div>
    <h4>
    <a name="sec-4.3.4"></a>4.3.4 Adding Self-Loop Edges</h4>
    <div class="c1">Self-loop edges can be used in several types of diagrams,
    including UML class diagrams and state diagrams. There are two kinds of
    self-loops: 
    <span class="c2">edge loops</span> and 
    <span class="c2">corner loops</span> as shown in the illustrations below:
    <br />
    <br />
    <div class="c1">
      <table class="c11" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td class="c12">
              <img src="images/Common/loop1.png" />
              <br />
            </td>
            <td class="c4">
              <img src="images/Common/loop2.png" />
              <br />
            </td>
          </tr>
          <tr>
            <td class="c4">a) an edge self-loop
            <br /></td>
            <td class="c4">b) a corner self-loop
            <br /></td>
          </tr>
        </tbody>
      </table>
      <br />
    </div></div>
    <div class="c1">
      <h4>
      <a name="Add_Edge_Loop"></a>Adding an Edge Loop</h4>
      <ol>
        <li>Select an edge loop template from the template panel.
        <br /></li>
        <li>Move the mouse inside the node to which the self-loop will be
        connected to.
        <br /></li>
        <li>Press the left mouse button at point (the starting point of the
        self-loop edge) near an edge and inside the node.
        <br /></li>
        <li>Drag the mouse along the edge in a horizontal or vertical direction
        to another point (the ending point of the self-loop edge) near the same
        edge and inside the node. Release the mouse button.
        <br /></li>
      </ol>
      <div class="c1">
        <table class="c11" cellpadding="2" cellspacing="2">
          <tbody>
            <tr align="center">
              <td class="c4">
                <img src="images/Common/add-loop1.png" />
              </td>
            </tr>
            <tr>
              <td class="c4">Adding edge loops. The dashed lines show the
              movement of the mouse.
              <br /></td>
            </tr>
          </tbody>
        </table>
        <br />
      </div>
      <h4>
      <a name="Add_Corner_Loop"></a>Adding a Corner Loop</h4>
      <ol>
        <li>Select a corner loop template from the template panel.
        <br /></li>
        <li>Move the mouse inside the node to which the self-loop will be
        connected to.
        <br /></li>
        <li>Press the left mouse button at point (the starting point of the
        self-loop edge) near one of the edges adjacent to the corner and inside
        the node.
        <br /></li>
        <li>Drag the mouse diagonally to another point (the ending point of the
        self-loop edge) near the other edge adjacent to the corner and inside
        the node. Release the mouse button.
        <br /></li>
      </ol>
      <div class="c1">
        <table class="c11" cellpadding="2" cellspacing="2">
          <tbody>
            <tr align="center">
              <td class="c4">
                <img src="images/Common/add-loop2.png" />
              </td>
            </tr>
            <tr>
              <td class="c4">Adding corner loops. The dashed lines show the
              movement of the mouse.</td>
            </tr>
          </tbody>
        </table>
        <br />
      </div>
    </div>
    <h4>
    <a name="sec-4.3.5"></a>4.3.5 Dealing with Compartments</h4>
    <div class="c1">
    <h4>
    <a name="Adjust_Divider"></a>Adjusting Dividers of Compartments</h4>Some of
    the shapes have interior dividers of compartments that can be adjusted. The
    adjustable dividers are indicated by 
    <i>divider handles</i> as shown in the illustrations below.</div>
    <table class="c14" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c4">
            <img src="images/Common/divider-class.png" />
            <br />
          </td>
          <td class="c4">
            <img src="images/Common/divider-package.png" />
            <br />
          </td>
        </tr>
        <tr>
          <td class="c13">(a) A class
          <br /></td>
          <td class="c13">(b) A package
          <br /></td>
        </tr>
        <tr>
          <td></td>
        </tr>
        <tr>
          <!--
          <td style="vertical-align: top;">
          <img src="images/Icons/divider4a.png" style="width: 242px; height: 145px;"><br>
          </td>
          -->
          <td class="c4">
            <img src="images/Common/divider-state1.png" />
            <br />
          </td>
          <td class="c4">
            <img src="images/Common/divider-state2.png" />
            <br />
          </td>
          <td class="c4">
            <br />
          </td>
        </tr>
        <tr>
          <td class="c13">(c) A state</td>
          <td class="c13">(d) An orthogonal state</td>
        </tr>
      </tbody>
    </table>
    <div class="c1">To adjust the dividers
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse on top of the divider to be moved, and the mouse
      cursor changes to the 
      <a href="#edge_resizing_cursor">edge resizing cursor</a>.</li>
      <li>Press the left mouse button and drag the mouse. The mouse movement is
      constrained either horizontally or vertically.</li>
      <li>Release the left mouse button when the divider is at the desired
      position.</li>
    </ol>
    <h4>
    <a name="Add_Compartment"></a>Adding a Compartment</h4>To add a
    compartment, you divide an existing compartment into two.
    <br />
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse inside the compartment to be divided.</li>
      <li>Double click the left mouse button, a new divider is added at the
      current mouse location.</li>
    </ol>
    <h4>
    <a name="Remove_Compartment"></a>Removing a Compartment</h4>
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.
      <br /></li>
      <li>Move the mouse on top of the divider to be removed, and the mouse
      cursor changes to the 
      <a href="Guide4.html#sec-edge_resizing_cursor">edge resizing
      cursor</a>.</li>
      <li>Double click the left mouse button.</li>
    </ol></div>


    <h3>
    <a name="sec-4.4"></a>4.4 Using Stencils</h3>
    <div class="c1">

      A <i>stencil</i> 
      is simply a diagram that contains customized shapes to be used as
      templates that can be copied and added to other diagrams. A stencil can be
      of any of the diagram types and can contain any shapes. Stencils can
      be easily customized and shared.

    <h4>
    <a name="Selecting_Stencils"></a>Selecting Stencils</h4>

    To select an available stencil use the left and right arrow button located 
    at the upper right corner of the stencil panel. 
    The two buttons allow you to 
    cycle through all available stencils forward or backward. 
    <br/>

    <img src="images/Windows/stencils.png" border="0" />
    
    <h4>
    <a name="Adding_Stencil_Shapes"></a>Adding a Shape from a Stencil</h4>

    Adding a shape from stencil is similar to adding a shape from a template.
    <ol>
      <li>Select the desired stencil using the left and right 
	arrow button located 
	at the upper right corner of the stencil panel. </li>
      <li>Click the left mouse button to select a shape in the stencil.</li>
      <li>Move the mouse to the desired location of the center of the shape on
      the canvas, and click the left mouse button to add the shape.</li>
    </ol>
    After the shape is added, the current tool is automatically
    switched to the point tool. 
    After selecting the shape from the stencil, 
    you may click the right mouse button to cancel the 
    insertion operation, and the current tool is switched back to the point tool.

    <h4>
    <a name="Managing_Stencils"></a>Managing Stencils</h4>

    Click the right mouse button will bring up a popup menu for the stencil panel. 
    <br/>

    <img src="images/Common/stencil-popup.png" border="0" />    

    <ul>
      <li>Edit stencil: edit and customize the current stencil. </li>
      <li>New stencil: create a new stencil. </li>
      <li>Edit stencil: delete the current stencil. </li>
    </ul>

    When you edit the current stencil or created a new stencil, the stencil will be 
    loaded into the main canvas panel and it can be edited as a regular diagram. 
    When you are done with editing, save the diagram. 
    The new or customized stencil will be updated 
    and available in the stencil panel.  

    <h4>
    <a name="Sharing_Stencils"></a>Sharing and Importing Stencils</h4>
    
    All available stencils are saved as diagram files in a subdirectory named 
    <tt>stencils</tt> under the <i>@APPNAME@</i> working directory, which is 
    named <tt>@PRODUCT@@VERSION@</tt> in your home directory. 
    These files can be copied and shared with other users. 
    To import a stencil, simply copy the 
    stencil file to the aforementioned directory. The imported stencil will be available 
    next time you start <i>@APPNAME@</i>.
    To permanently remove a stencil, you need to remove the stencil file from 
    this directory. 

    </div>

    <h3>
    <a name="sec-4.5"></a>4.5 Additional Editing Operations</h3>
    <div class="c1">This section will cover editing operations for deleting,
    copying, and grouping shapes.</div>
    <h4>
    <a name="sec-4.5.1"></a>4.5.1 Deleting a Shape</h4>
    <div class="c1">There are several ways to delete a shape.
    <ol>
      <li>Select the shape to be deleted.</li>
      <li>Click on the deletion tool [ 
      <img src="images/Icons/trash.gif" />] on the tool bar, or select from the
      menu bar: Edit | Cut, or press the DEL key.
      <br /></li>
    </ol>An exception to using the DEL key to delete a shape is the text
    shape.</div>
    <h4>
    <a name="sec-4.5.2"></a>4.5.2 Copying a Shape</h4>
    <div class="c1">
    <ol>
      <li>Select the shape to be copied.</li>
      <li>Select from the menu bar: Edit | Copy.</li>
      <li>Select from the menu bar: Edit | Paste.</li>
      <li>Move the mouse to place the shape at the desired location.</li>
      <li>Click the left mouse button.</li>
    </ol>Steps 3-5 may be repeated as many times as needed to add multiple
    copies of the same shape. The last shape that was deleted or cut can also
    be pasted back by following steps 3-5.
    <br /></div>
    <h4>
    <a name="sec-4.5.3"></a>4.5.3 Grouping Shapes</h4>
    <div class="c1">The grouping feature allows a number of shapes to be
    grouped together, so that they can be moved and copied as a group, i.e., as
    a whole. A group is bounded by a rectangular region, known as the group
    region, that properly contains all shapes that belong to the group, as
    shown in the diagram below.
    <br />
    <div class="c1">
      <img src="images/Common/select-group.png" />
      <br />
    </div>
    <h4>
    <a name="Making_a_New_Group"></a>Making a New Group</h4>
    <ol>
      <li>Select the group tool [ 
      <img src="images/Icons/group.png" class="c10" />] from the tool bar.</li>
      <li>Move the mouse to one corner of the rectangular group region, and
      press the left mouse button.</li>
      <li>Drag the mouse to the diagonally opposing corner of the group region
      and release the left mouse button.</li>
    </ol>All shapes that are entirely contained within the group region become
    part of the group.
    <br />
    <h4>
    <a name="Selecting_a_Group"></a>Selecting a Group</h4>Selecting an existing
    is similar to selecting an individual shape using the point tool.
    <br />
    <ol>
      <li>Select the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.</li>
      <li>Move the mouse on top of the group to be selected and click the left
      mouse button.
      <br /></li>
    </ol>
    <h4>
    <a name="Deselecting_a_Group"></a>Deselecting a Group</h4>
    <ol>
      <li>Select the group tool [ 
      <img src="images/Icons/group.png" class="c10" />] from the tool bar.</li>
      <li>Move the mouse outside the current group region and click the left
      mouse button.</li>
    </ol>
    <h4>
    <a name="Moving_a_Group"></a>Moving a Group</h4>
    <ol>
      <li>Select the group tool [ 
      <img src="images/Icons/group.png" class="c10" />] or the point tool [ 
      <img src="images/Icons/point.png" class="c10" />] from the tool bar.</li>
      <li>Move the mouse on top of the group to be moved, and the mouse cursor
      changes to the 
      <a href="#moving_cursor">moving cursor</a>.</li>
      <li>Press the left mouse button and drag the mouse.</li>
      <li>Release the left mouse button when the group is at the desired
      location.
      <br /></li>
    </ol>
    <h4>
    <a name="Deleting_a_Group"></a>Deleting a Group</h4>There are several ways
    delete a group.
    <ol>
      <li>Select the group to be deleted.</li>
      <li>Click on the deletion tool [ 
      <img src="images/Icons/trash.gif" class="c10" />] on the tool bar, or
      select from the menu bar: Edit | Cut, or press the DEL key</li>
    </ol>
    <h4>
    <a name="Copying_a_Group"></a>Copying a Group</h4>Copying a group is
    similar to copying an individual shape.
    <br />
    <ol>
      <li>Select the group to be copied.</li>
      <li>Select from the menu bar: Edit | Copy.</li>
      <li>Select from the menu bar: Edit | Paste.</li>
      <li>Move the mouse to place the group at the desired location.</li>
      <li>Click the left mouse button.</li>
    </ol>Steps 3-5 may be repeated as many times as needed to add multiple
    copies of the same group.</div>
    <h4>
    <a name="sec-4.5.4"></a>4.5.4 Aligning Shapes</h4>
    <div class="c1">A set of selected shapes can be aligned vertically or
    horizontally. For vertical alignment, the selected shapes can be aligned
    with their left edges, right edges, or the centers. For horizontal
    alignment, the selected shapes can be aligned with their top edges, bottom
    edges, or the centers.
    <h4>
    <a name="Align_Group"></a>Aligning Selected Shapes</h4>
    <ol>
      <li>Select each shape to be aligned by shift-left-clicking the mouse,
      i.e., moving the mouse over the top of the shape and clicking the left
      mouse button while holding down the SHIFT key.</li>
      <li>Select from the menu bar:
      <ul>
        <li>Format | Align vertical, then the Left, Center, or Right sub-menu,
        or</li>
        <li>Format | Align horizontal, then the Top, Center, or Bottom
        sub-menu.</li>
      </ul></li>
    </ol>
    <h4>
    <a name="Align_Edge"></a>Aligning Shapes Connected to an Edge</h4>The two
    nodes connected by a straight edge can also be aligned vertically or
    horizontally.
    <ol>
      <li>Select the edge that connects the nodes to be aligned.</li>
      <li>Right click the mouse button, a context menu will pop up. (For MacOS
      users with a single button mouse, use Control-click to bring up the
      context menus)</li>
      <li>Select from the context menu
      <table border="0">
        <tbody>
          <tr>
            <td>
              <img src="images/Icons/align-center.gif" />
            </td>
            <td>Align center vertically or horizontally, depending on whether
            the edge is predominantly vertical or horizontal,
            respectively.</td>
          </tr>
          <tr>
            <td>
              <img src="images/Icons/align-left.gif" />
            </td>
            <td>Align vertically left.</td>
          </tr>
          <tr>
            <td>
              <img src="images/Icons/align-right.gif" />
            </td>
            <td>Align vertically right.</td>
          </tr>
          <tr>
            <td>
              <img src="images/Icons/align-top.gif" />
            </td>
            <td>Align horizontally top.</td>
          </tr>
          <tr>
            <td>
              <img src="images/Icons/align-bottom.gif" />
            </td>
            <td>Align horizontally bottom.</td>
          </tr>
        </tbody>
      </table></li>
    </ol>Alternatively, the nodes connected by the straight edge can be aligned
    as follows.
    <ol>
      <li>Select the edge that connects the nodes to be aligned.</li>
      <li>Select from the menu bar:
      <ul>
        <li>Format | Align vertical, then the Left, Center, or Right sub-menu,
        or</li>
        <li>Format | Align horizontal, then the Top, Center, or Bottom
        sub-menu.</li>
      </ul></li>
    </ol></div>
    <h3>
    <a name="sec-4.6"></a>4.6 Setting Properties</h3>
    <h4>
    <a name="sec-4.6.1"></a>4.6.1 Setting Properties of Shapes</h4>
    <div class="c1">Many properties of shapes, such as colors and styles. etc,
    can be set or edited from the 
    <span class="c15">Format</span> menu on the menu bar or using the
    properties tools on the tool bar. The properties set in this way will be in
    effect until another change is made. 
    The settings will become the system default settings, which will be applied to 
    all the new shapes inserted using the shape insertion tools on the tool bar. 
    If a shape is selected at the time of
    the change, the new settings will also be applied to the currently selected
    shape. To change the properties of the currently selected shape only use
    the attribute inspector panel for visual attributes.

    <h4>
    <a name="Choosing_Colors"></a>Choosing Colors</h4>
    <ol>
      <li>Open the color selection dialog by either
      <ul>
        <li>select from the menu bar: Format | Colors ..., or</li>
        <li>click on the color selection tool ( 
        <img src="images/Common/colorsel.png" align="bottom" border="0" />) on
        the tool bar.</li>
      </ul></li>
      <li>Select the common colors by clicking the left mouse button on the
	color squares, and click OK. 
	<br/>
	<img src="images/Windows/color-dialog.png" hspace="20" vspace="20" />
      </li>
      <li>If the desired color is not available in the simple color dialog
      <dl>
        <dt>3.1 Click the &quot;More colors&quot; button, a complete color
          dialog will pop up. It offers six color choosers (see below). 
        <br />3.2 Choose the color and click OK on the complete color dialog.
        <br />3.3 Click OK on the color selection dialog.</dt>
      </dl></li>
    </ol>
    The following are the different color choosers available. 

    <table class="c11" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td class="c12">
	    <img src="images/Windows/color-dialog1.png" hspace="10" vspace="10" />
          </td>
	  <td>&nbsp;</td>
          <td class="c12">
	    <img src="images/Windows/color-dialog2.png" hspace="10" vspace="10" />
            </td>
	  <td>&nbsp;</td>
          <td class="c12">
	    <img src="images/Windows/color-dialog3.png" hspace="10" vspace="10" />
          </td>
        </tr>
        <tr>
          <td class="c4">a) Color wheel</td>
	  <td>&nbsp;</td>
          <td class="c4">b) Color slider </td>
	  <td>&nbsp;</td>
          <td class="c4">c) Color palettes</td>
        </tr>

        <tr>
          <td class="c12">
	    <img src="images/Windows/color-dialog4.png" hspace="10" vspace="10" />
          </td>
	  <td>&nbsp;</td>
          <td class="c12">
	    <img src="images/Windows/color-dialog5.png" hspace="10" vspace="10" />
          </td>
	  <td>&nbsp;</td>
          <td class="c12">
	    <img src="images/Windows/color-dialog6.png" hspace="10" vspace="10" />
          </td>
        </tr>
        <tr>
          <td class="c4">d) Color swatches</td>
	  <td>&nbsp;</td>
          <td class="c4">e) Crayons</td>
	  <td>&nbsp;</td>
          <td class="c4">f) Xoetrope color wheel</td>
          </tr>
      </tbody>
    </table>

    The color property applies to all types of shapes.

    <h4>
    <a name="Choosing_Fill"></a>Choosing Fill Colors and Gradient Patterns</h4>

    For a closed shape, the interior can be filled with a solid color or a gradient pattern.  
    <ol>
      <li>Open the fill color and gradient pattern selection dialog by either
	<ul>
          <li>select from the menu bar: Format | Fill &amp; gradient ..., or</li>
          <li>click on the fill and gradient selection tool ( 
            <img src="images/Common/fillsel.png" align="bottom" border="0" />) on
            the tool bar.</li>
	</ul>
	<img src="images/Windows/gradient-dialog1.png" hspace="20" vspace="20" />
      </li>
      <li>Check or uncheck the check box labeled <b>Fill</b> 
	to indicate whether the interior of the 
	shape should be filled or not.
      </li>
      <li>
	If the Fill check box is checked, you may use the list of radio buttons below to indicate 
	whether the shape should be fill with a solid color, a linear gradient, or a radial gradient. 

	<dl>
          <dt>3.1 If the solid fill radio button is selected, 
	    the following dialog will be displayed. 
	    To select or change the fill color, click on the 
	    color button in the Fill color box to bring up a color selection dialog. 
	    <br/>
	    <img src="images/Windows/gradient-dialog2.png" hspace="20" vspace="20" />
	  </dt>
          <dt>3.2 If the linear gradient radio button is selected, 
	    the following dialog will be displayed. 
	    Click on either of the two color buttons in the
	    Gradient colors box to choose the colors that define the linear gradient. 
	    Use the button between the two color buttons to swap the two colors. 
	    Click on one of the buttons in the Gradient patterns box to choose from the 
	    different linear gradient patterns available. 
	    <br/>
	    <img src="images/Windows/gradient-dialog3.png" hspace="20" vspace="20" />
	  </dt>
          <dt>3.3 If the radial gradient radio button is selected,
	    the following dialog will be displayed.
	    Click on either of the two color buttons in the
	    Gradient colors box to choose the colors that define the radial gradient. 
	    Use the button between the two color buttons to swap the two colors. 
	    Click on one of the buttons in the Gradient patterns box to choose from the 
	    different radial gradient patterns available. 
	    <br/>
	    <img src="images/Windows/gradient-dialog4.png" hspace="20" vspace="20" />
	  </dt>
	</dl>
      </li>
    </ol>

    The fill color and gradient pattern property applies to all closed shapes.
    
    <h4>
    <a name="Choosing_Fonts"></a>Choosing Fonts</h4>
    <ol>
      <li>Open the font selection dialog by either
      <ul>
        <li>select from the menu bar: Format | Fonts ..., or</li>
        <li>click on the font selection tool ( 
        <img src="images/Common/fontsel.png" align="bottom" border="0" />) on
        the tool bar.</li>
      </ul></li>
      <li>The following font properties can be set:
      <ul>
        <li>Font name: choose from a list of available fonts.</li>
        <li>Font size: an integer.</li>
        <li>Font style: the options are Plain, Bold, Italic, and Bold-Italic
        <br /></li>
      </ul></li>
    </ol>The font properties apply to text shapes.
    <h4>
    <a name="Choosing_Line_Styles_and_Arrows"></a>Choosing Line Styles and
    Arrows</h4>
    <ol>
      <li>Select from the menu bar: Options | Line styles and arrows ..., a
      line styles and arrows dialog will pop up. The dialog consists of two
      tabbed panes with two sets of independent choices.</li>
      <li>Click the &quot;Line styles&quot; tab to choose line styles.
      <dl>
        <dt>2.1 The following line properties can be set:</dt>
      </dl>
      <ul>
        <li>Line width: an integer indicating the thickness of the lines.
        Default: 1.</li>
        <li>Line style: the options are solid line, dashed line, dash-dot line,
        dash-dot-dot line, and dotted line. Default: solid line.</li>
        <li>Line join: the options are miter, bevel, and round. Default:
        miter.</li>
        <li>Line cap: the options are square, butt, round. Default:
        square.</li>
      </ul>
      <dl>
        <dt>2.2 Click OK to accept the changes.
        <br /></dt>
      </dl></li>
      <li>Click the &quot;Arrows&quot; tab to choose arrow types and sizes.
      <dl>
        <dt>3.1 The following line properties can be set:</dt>
      </dl>
      <ul>
        <li>Head arrow type.</li>
        <li>Head arrow size.</li>
        <li>Tail arrow type.</li>
        <li>Tail arrow size.
        <br /></li>
      </ul>
      <dl class="c16">
        <dt>The options for arrow types include: no arrow, line arrow, hollow
        triangle, filled triangle, hollow diamond, filled diamond, hollow dot,
        filled dot, cross dot.
        <br /></dt>
      </dl>
      <dl>
        <dt>3.2 Click OK to accept the changes.
        <br /></dt>
      </dl></li>
    </ol>Alternatively, the line styles and arrow types can be selected using
    the The line and arrow style selection tools ( 
    <img src="images/Common/linesel.png" align="bottom" border="0" />) and the
    joint and cap style selection tools ( 
    <img src="images/Common/jointsel.png" align="bottom" border="0" />) on the
    tool bar.
    <p>The line style and line thickness properties apply to all line shapes,
    which include line segments, curves, unfilled rectangular shapes, circles,
    polygons, and poly-lines. The arrow type and size properties apply to all
    open line shapes, which include line segments, curves, and
    poly-lines.</p></div>
    <h4>
    <a name="sec-4.6.2"></a>4.6.2 Setting General Properties</h4>
    <div class="c1">The general properties can be set or edited from the 
    <span class="c15">Properties</span> menu on the menu bar.
    <br />
    <h4>
    <a name="Setting_Project_Properties"></a>Setting Project Properties</h4>
    <ol>
      <li>Select from the menu bar: Properties | Project ..., a dialog will pop
      up.</li>
      <li>The following properties can be set by filling in the corresponding
      text fields.
      <ul>
        <li>Project name, used as project file name and project archive file
        name</li>
        <li>Project type</li>
        <li>Title</li>
        <li>Author</li>
        <li>Organization</li>
        <li>Description</li>
      </ul></li>
      <li>Click OK to accept the changes.
      <br /></li>
    </ol>
    <div class="c1">
      <img src="images/Windows/project-properties-dialog.png" />
      <br />
    </div>
    <h4>
    <a name="Setting_Document_Properties"></a>Setting Diagram Properties</h4>
    <ol>
      <li>Select from the menu bar: Properties | Diagram ..., a dialog will pop
      up.</li>
      <li>The following properties can be set by filling in the corresponding
      text fields.
      <ul>
        <li>Title</li>
        <li>Author</li>
        <li>Organization</li>
        <li>Description</li>
      </ul></li>
      <li>Click OK to accept the changes.
      <br /></li>
    </ol>
    <div class="c1">
      <img src="images/Windows/document-properties-dialog.png" />
      <br />
    </div>
    <h4>
    <a name="Setting_Canvas_Properties"></a>Setting Canvas Properties</h4>
    <ol>
      <li>Select from the menu bar: Properties | Canvas ..., a dialog will pop
      up.</li>
      <li>The following properties can be set:
      <ul>
        <li>Canvas width and height: the dimension of the drawable area.</li>
        <li>Margin width and height: the margin used in printing and exporting
        the drawing.</li>
        <li>Unit measurement: options are: pixels, inches and centimeters
        (cm)</li>
      </ul></li>
      <li>Click OK to accept the changes.</li>
    </ol>
    <div class="c1">
      <img src="images/Windows/canvas-properties-dialog.png" />
      <br />
    </div>
    <h4>
    <a name="Setting_Background"></a>Setting Background</h4>
    <ol>
      <li>Select from the menu bar: Properties | Background ..., a dialog will
      pop up.</li>
      <li>The following properties can be set:
      <ul>
        <li>Grid on/off: to turn the grid on or off. Default: on.</li>
        <li>Grid size: to choose between small or large grid size. Default:
        large.</li>
        <li>Grid line: to choose between solid or dashed grid line. Default:
        solid line.
        <br /></li>
      </ul></li>
      <li>Click OK to accept the changes.</li>
    </ol>
    <div class="c1">
      <img src="images/Windows/background-properties-dialog.png" />
      <br />
    </div></div>
    <h4>
    <a name="sec-4.6.3"></a>4.6.3 Using the Visual Attribute Panel</h4>
    <div class="c1">The visual attribute panel displays the properties of the
    currently selected shape.
    <br />
    <br />
    <div class="c1">
      <img src="images/Common/inspector-visual.png" />
      <br />
    </div>
    <br />Click on the buttons or use the drop-down boxes in the right column
    to set various attributes of the current shape. The changes made using the
    attribute panel will only affect the current shape.</div>
    <h3>
    <a name="sec-4.7"></a>4.7 Managing Files and Projects</h3>
    <h4>
    <a name="sec-4.7.1"></a>4.7.1 Saving and Loading Diagrams</h4>
    <div class="c1">Each diagram is saved in a separate file. The files are in
    XML format. The default extension of the diagram files created by 
    <i>@APPNAME@</i> is 
    <tt>.vml</tt>
    <h4>
    <a name="Starting_a_New_Diagram"></a>Starting a New Diagram</h4>
    <ol>
      <li>Select from the menu bar: File | New diagram</li>
      <li>Start a new diagram in a new canvas.</li>
    </ol>
    <h4>
    <a name="Saving_a_Diagram_to_the_Current_File"></a>Saving the Current
    Diagram to the Current File</h4>
    <ol>
      <li>Select from the menu bar: File | Save diagram</li>
      <li>The current diagram is saved to the current file.</li>
    </ol>The current file name is shown on the title bar of the main window.
    The default file name is &quot;Untitled.&quot; Use &quot;Save diagram
    as&quot; to choose a different file name.
    <h4>
    <a name="Saving_a_Diagram_to_a_Different_File"></a>Saving the Current
    Diagram to a Different File</h4>
    <ol>
      <li>Select from the menu bar: File | Save diagram as, a file dialog will
      pop up.</li>
      <li>Choose a file name, and click &quot;Save as.&quot;
      <br /></li>
      <li>The current diagram is saved to the selected file. The selected file
      becomes the current file.
      <br /></li>
    </ol>
    <h4>
    <a name="Loading_a_Diagram"></a>Loading a Diagram</h4>
    <ol>
      <li>Select from the menu bar: File | Open diagram, a file dialog will pop
      up.</li>
      <li>Choose a file name, and click &quot;Open.&quot;
      <br /></li>
    </ol>
    <h4>
    <a name="Exporting_Diagram_Model"></a>Exporting Diagram Model</h4>The
    semantic model of UML diagrams can be exported exported to an XML file. The
    exported models do not contain any visual or graphical information of the
    original diagrams. Therefore the exported models can not be edited
    visually. The exported models can be processed by other tools, such as
    report generators or code generators. The default extension of the exported
    model files is 
    <tt>.xml</tt> The exported models are not conforming with the UML XMI
    standards.
    <ol>
      <li>Select from the menu bar: File | Export diagram model, a file dialog
      will pop up.</li>
      <li>Choose a file name, and click &quot;Export model.&quot;
      <br /></li>
    </ol>
    <h4>
    <a name="Exporting_Diagram_Image"></a>Exporting Diagram Image</h4>The
    diagrams can be exported to a number of common graphics file
    formats.
    <ol>
      <li>Select from the menu bar: File | Export diagram image | 
      <span class="c2">format</span>, where 
      <span class="c2">format</span> is SVG, PDF, PNG, GIF, or TIFF,
      a file dialog will pop up.</li>
      <li>Choose a file name, and click &quot;Export image.&quot;
      <br /></li>
    </ol></div>
    <h4>
    <a name="sec-4.7.2"></a>4.7.2 Saving and Loading Projects</h4>
    <div class="c1">
    <p>A 
    <i>project</i> is a collection of diagrams organized into 
    <i>project folders</i>. Each project consists of one or more diagrams and
    project folders. Each project folder also consists of one or more diagrams
    and sub-folders. The structure of opened projects is displayed in the 
    <a href="#4.7.4">navigator panel</a> as project trees.</p>
    <p>Each project is stored in a project file. The project files contain the
    information of the structure of the projects and references to the files of
    the diagrams contained in the project. The project files do not include the
    actual diagrams contained in the projects. The project files contain
    relative paths to the project folders and diagram files contained in the
    projects. Therefore, manually move the diagram files and folders will cause
    problems when loading the projects later on. The moved files and folders
    will not be found.</p>
    <h4>
    <a name="Starting_a_New_Project"></a>Starting a New Project</h4>
    <ol>
      <li>Select from the menu bar: Project | New project, a project property
      dialog will pop up</li>
      <li>The following properties can be set by filling in the corresponding
      text fields.
      <ul>
        <li>Project name, used as project file name and project archive file
        name</li>
        <li>Project type</li>
        <li>Title</li>
        <li>Author</li>
        <li>Organization</li>
        <li>Description</li>
      </ul></li>
      <li>Click OK to accept the settings.
      <br /></li>
      <li>The new project is added to the navigator panel.</li>
      <li>Start a new project with a default folder and a default empty
      diagram.</li>
    </ol>
    <div class="c1">
      <img src="images/Windows/new-project-dialog.png" />
      <br />
    </div>
    <h4>
    <a name="Saving_a_Project"></a>Saving the Current Project</h4>
    <ol>
      <li>Select from the menu bar: Project | Save project</li>
      <li>The current project is saved to the current project file.</li>
    </ol>The default project file name is the project name with the default
    project file extension 
    <tt>.vmp</tt>. Use &quot;Save project as&quot; to choose a different file
    name.
    <h4>
    <a name="Saving_a_Project_to_a_Different_File"></a>Saving the Current
    Project to a Different Project File</h4>
    <ol>
      <li>Select from the menu bar: Project | Save project as, a file dialog
      will pop up.</li>
      <li>Choose a file name, and click &quot;Save as.&quot;</li>
      <li>The current project is saved to the selected project file.</li>
    </ol>
    <h4>
    <a name="Loading_a_Project"></a>Loading a Project</h4>
    <ol>
      <li>Select from the menu bar: Project | Open project, a file dialog will
      pop up.</li>
      <li>Choose a project file name, and click &quot;Open.&quot;</li>
    </ol>
    <h4>
    <a name="Closing_a_Project"></a>Closing a Project</h4>
    <ol>
      <li>Select from the menu bar: Project | Close project.</li>
      <li>The current project and all its diagrams are closed and removed from
      the canvas.</li>
      <li>The current project is also removed from the navigator
      panel.</li>
    </ol></div>
    <h4>
    <a name="sec-4.7.3"></a>4.7.3 Saving and Loading Project Archives</h4>
    <div class="c1">The project archive file of a project is a single archive
    file that contains the project file and all the diagram files and other
    relevant documents contained in the project. The project archive files can
    be easily moved and copied to other locations or machine without loss of
    information. The project archive files can be easily loaded back to the 
    <i>@APPNAME@</i>.
    <h4>
    <a name="Saving_Project_Archive"></a>Saving the Current Project to a
    Project Archive File</h4>
    <ol>
      <li>Select from the menu bar: Project | Save project archive</li>
      <li>The current project is saved to a project archive file.</li>
    </ol>The default project file name is the project name with the default
    project archive file extension 
    <tt>.par</tt>. Use &quot;Save project archive as&quot; to choose a
    different file name.
    <h4>
    <a name="Saving_Project_Archive_As"></a>Saving the Current Project to a
    Different Project Archive File</h4>
    <ol>
      <li>Select from the menu bar: Project | Save project archive as, a file
      dialog will pop up.</li>
      <li>Choose a file name, and click &quot;Save as.&quot;</li>
      <li>The current project is saved to the selected project archive
      file.</li>
    </ol>
    <h4>
    <a name="Loading_Project_Archive"></a>Loading a Project Archive File</h4>
    <ol>
      <li>Select from the menu bar: Project | Open project archive, a file
      dialog will pop up.</li>
      <li>Choose a project archive file name, and click &quot;Open.&quot;
      <br /></li>
    </ol></div>
    <h4>
    <a name="sec-4.7.4"></a>4.7.4 The Navigator Panel</h4>
    <div class="c1">The navigator panel displays the structure of the
    opened projects as project trees.
    <div class="c1">
      <img src="images/Windows/navigator-project.png" border="0" />
    </div>Various actions are available on the navigator panel through
    the context menus associated the tree nodes. To bring up the context menus,
    move the mouse cursor over a tree node, and right click the mouse button.
    (For MacOS users with a single button mouse, use Control-click to bring up
    the context menus) The context menus are context sensitive. The following
    are the context menus available at different type of tree nodes.
    <h4 class="c17">The Project Manager Root Node</h4>
    <div class="c1">
      <table border="0" cellpadding="2" cellspacing="0">
        <tbody>
          <tr>
            <td valign="top" width="120">
              <b>New project</b>
            </td>
            <td width="12"></td>
            <td>Start a new project.</td>
          </tr>
          <tr>
            <td valign="top" width="120">
              <b>Open project</b>
            </td>
            <td width="12"></td>
            <td>Open an existing project.</td>
          </tr>
          <tr>
            <td valign="top" width="120">
              <b>Close all projects</b>
            </td>
            <td width="12"></td>
            <td>Close all opened projects.</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h4 class="c17">The Project Nodes</h4>
    <div class="c1">
      <table border="0" cellpadding="2" cellspacing="0">
        <tbody>
          <tr>
            <td valign="top" width="200">
              <b>New project</b>
            </td>
            <td width="12"></td>
            <td>Start a new project.</td>
          </tr>
          <tr>
            <td valign="top" width="200">
              <b>Open project</b>
            </td>
            <td width="12"></td>
            <td>Open an existing project.</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Save project</b> 
            <i>Project</i></td>
            <td width="12"></td>
            <td>Save the current project (named 
            <i>Project</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Edit project</b> 
            <i>Project</i></td>
            <td width="12"></td>
            <td>Close the project properties of the current project (named 
            <i>Project</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Close project</b> 
            <i>Project</i></td>
            <td width="12"></td>
            <td>Close the current project (named 
            <i>Project</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Add folder in</b> 
            <i>Project</i></td>
            <td width="12"></td>
            <td>Add a new folder in the current project (named 
            <i>Project</i>). Use sub-menus to select the folder type, which can
            be 
            <b>UML Model</b>, 
            <b>UML Package</b>, or 
            <b>Document Folder</b>.</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Add new diagram in</b> 
            <i>Project</i></td>
            <td width="12"></td>
            <td>Add a new diagram in the current project (named 
            <i>Project</i>). Use sub-menus to select the diagram type, which
            can be 
            <b>UML Class Diagram</b>, 
            <b>UML Package Diagram</b>, 
            <b>UML Use Case Diagram</b>, 
            <b>UML State Diagram</b>, 
            <b>UML Sequence Diagram</b>, or 
            <b>UML Activity Diagram</b>.</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h4 class="c17">The Project Folder Nodes</h4>
    <div class="c1">
      <table border="0" cellpadding="2" cellspacing="0">
        <tbody>
          <tr>
            <td valign="top" width="200">
            <b>Move folder</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Move the current folder (named 
            <i>Folder</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Delete folder</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Delete the current folder (named 
            <i>Folder</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Rename folder</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Rename the current folder (named 
            <i>Folder</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Add folder in</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Add a new sub-folder in the current folder (named 
            <i>Folder</i>). Use sub-menus to select the folder type, which can
            be 
            <b>UML Model</b>, 
            <b>UML Package</b>, or 
            <b>Document Folder</b>.</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Add new diagram in</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Add a new diagram in the current folder (named 
            <i>Folder</i>). Use sub-menus to select the diagram type, which can
            be 
            <b>UML Class Diagram</b>, 
            <b>UML Package Diagram</b>, 
            <b>UML Use Case Diagram</b>, 
            <b>UML State Diagram</b>, 
            <b>UML Sequence Diagram</b>, or 
            <b>UML Activity Diagram</b>.</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h4 class="c17">The Diagram Nodes</h4>
    <div class="c1">
      <table border="0" cellpadding="2" cellspacing="0">
        <tbody>
          <tr>
            <td valign="top" width="200">
            <b>Move diagram</b> 
            <i>Diagram</i></td>
            <td width="12"></td>
            <td>Move the current diagram (named 
            <i>Diagram</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Delete diagram</b> 
            <i>Diagram</i></td>
            <td width="12"></td>
            <td>Delete the current diagram (named 
            <i>Diagram</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Rename diagram</b> 
            <i>Diagram</i></td>
            <td width="12"></td>
            <td>Rename the current diagram (named 
            <i>Diagram</i>).</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Add folder in</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Add a new sub-folder in the parent folder of the current
            diagram (named 
            <i>Folder</i>). Use sub-menus to select the folder type, which can
            be 
            <b>UML Model</b>, 
            <b>UML Package</b>, or 
            <b>Document Folder</b>.</td>
          </tr>
          <tr>
            <td valign="top" width="200">
            <b>Add new diagram in</b> 
            <i>Folder</i></td>
            <td width="12"></td>
            <td>Add a new diagram in the parent folder of the current diagram
            (named 
            <i>Folder</i>). Use sub-menus to select the diagram type, which can
            be 
            <b>UML Class Diagram</b>, 
            <b>UML Package Diagram</b>, 
            <b>UML Use Case Diagram</b>, 
            <b>UML State Diagram</b>, 
            <b>UML Sequence Diagram</b>, or 
            <b>UML Activity Diagram</b>.</td>
          </tr>
        </tbody>
      </table>
    </div></div>
    <h3>
    <a name="sec-4.8"></a>4.8 Miscellaneous Functions</h3>
    <h4>
    <a name="sec-4.8.1"></a>4.8.1 Displaying an Overview of the Canvas</h4>
    <div class="c1">An overview, i.e., a thumbnail view, of the canvas will be
      displayed in a pop-up window at the lower-left corner of the canvas window
      when the mouse pointer is on top of the overview icon 
      (<img src="images/Icons/thumbview.png" align="bottom" border="0" />) on the status bar.
      <br/>

      <img src="images/Common/docoverview.png" hspace="10" vspace="10" />
    </div>

    <h4>
    <a name="sec-4.8.2"></a>4.8.2 Displaying the Properties of the Diagram</h4>

    <div class="c1">The properties of the current diagram will be displayed in
    a pop-up window at the lower-left corner of the canvas window when the
    mouse pointer is on top of the information icon 
      (<img src="images/Icons/info.png" align="bottom" border="0" />) on the status bar.
      <br/>

      <img src="images/Common/docinfo.png" hspace="10" vspace="10" />

    </div>

    <h4>
    <a name="sec-4.8.3"></a>4.8.3 Shortcuts and Accelerators for Menus</h4>
    <div class="c1">Menus on the menu bar can also be selected using the
    keyboard.
    <br />
    <h4>
    <a name="Using_Shortcuts"></a>Using Menu Shortcuts</h4>To use the
    shortcuts, hold the ALT key and the press the key corresponding to the
    underscored letter on the label of the menu item. For example, Edit | Undo
    can be selected by pressing ALT-E followed by ALT-U.
    <br />
    <h4>
    <a name="Using_Accelerators"></a>Using Menu Accelerators</h4>To use the
    accelerators, press the key combinations shown at the right side of each
    menu item. for example Edit | Undo can be selected by pressing CTRL-U. The
    following table lists the accelerators for all menus.
    <div class="c1">
      <table border="0">
        <tbody>
          <tr>
            <td>
              <b>File</b>
            </td>
          </tr>
          <tr>
            <td>New diagram</td>
            <td>CTRL-N</td>
          </tr>
          <tr>
            <td>Open diagram</td>
            <td>CTRL-O</td>
          </tr>
          <tr>
            <td>Save diagram</td>
            <td>CTRL-S</td>
          </tr>
          <tr>
            <td>Save diagram as</td>
            <td>CTRL-A</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Export diagram model</td>
            <td>CTRL-D</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Export diagram image</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;SVG</td>
            <td>CTRL-ALT-S</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;PDF</td>
            <td>CTRL-ALT-P</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;---</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;PNG</td>
            <td>CTRL-ALT-N</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;TIFF</td>
            <td>CTRL-ALT-T</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Page setup</td>
            <td>CTRL-G</td>
          </tr>
          <tr>
            <td>Print diagram preview</td>
            <td>CTRL-W</td>
          </tr>
          <tr>
            <td>Print diagram</td>
            <td>CTRL-P</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Exit</td>
            <td>CTRL-SHIFT-X</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <b>Project</b>
            </td>
          </tr>
          <tr>
            <td>New project</td>
            <td>CTRL-SHIFT-N</td>
          </tr>
          <tr>
            <td>Open project</td>
            <td>CTRL-SHIFT-O</td>
          </tr>
          <tr>
            <td>Save project</td>
            <td>CTRL-SHIFT-S</td>
          </tr>
          <tr>
            <td>Save project as</td>
            <td>CTRL-SHIFT-A</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Close project</td>
            <td>CTRL-SHIFT-C</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <b>Edit</b>
            </td>
          </tr>
          <tr>
            <td>Copy</td>
            <td>CTRL-C</td>
          </tr>
          <tr>
            <td>Cut</td>
            <td>CTRL-X</td>
          </tr>
          <tr>
            <td>Paste</td>
            <td>CTRL-V</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Undo</td>
            <td>CTRL-U</td>
          </tr>
          <tr>
            <td>Redo</td>
            <td>CTRL-R</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <b>View</b>
            </td>
          </tr>
          <tr>
            <td>Zoom in</td>
            <td>PageUp</td>
          </tr>
          <tr>
            <td>Zoom out</td>
            <td>PageDown</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Restore (1:1)</td>
            <td>CTRL-SHIFT-1</td>
          </tr>
          <tr>
            <td>Fit width</td>
            <td>CTRL-SHIFT-W</td>
          </tr>
          <tr>
            <td>Fit height</td>
            <td>CTRL-SHIFT-H</td>
          </tr>
          <tr>
            <td>Fit window</td>
            <td>CTRL-SHIFT-I</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Refresh</td>
            <td>CTRL-F</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <b>Format</b>
            </td>
          </tr>
          <tr>
            <td>Color</td>
            <td>CTRL-ALT-C</td>
          </tr>
          <tr>
            <td>Font</td>
            <td>CTRL-ALT-F</td>
          </tr>
          <tr>
            <td>Line style and arrows</td>
            <td>CTRL-ALT-L</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>Align vertical</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;Left</td>
            <td>CTRL-ALT-Left</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;Center</td>
            <td>CTRL-ALT-V</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;Right</td>
            <td>CTRL-ALT-Right</td>
          </tr>
          <tr>
            <td>Align horizontal</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;Top</td>
            <td>CTRL-ALT-Up</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;Center</td>
            <td>CTRL-ALT-H</td>
          </tr>
          <tr>
            <td>&nbsp;&nbsp;Bottom</td>
            <td>CTRL-ALT-Down</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <b>Properties</b>
            </td>
          </tr>
          <tr>
            <td>Project</td>
            <td>CTRL-SHIFT-P</td>
          </tr>
          <tr>
            <td>Document</td>
            <td>CTRL-SHIFT-D</td>
          </tr>
          <tr>
            <td>Canvas</td>
            <td>CTRL-SHIFT-V</td>
          </tr>
          <tr>
            <td>Background</td>
            <td>CTRL-SHIFT-B</td>
          </tr>

          <tr>
            <td>
              <b>Options</b>
            </td>
          </tr>
          <tr>
            <td>Show rulers</td>
            <td>CTRL-SHIFT-R</td>
          </tr>
          <tr>
            <td>Anti-aliasing</td>
            <td>CTRL-SHIFT-L</td>
          </tr>
          <tr>
            <td>Fractional metrics</td>
            <td>CTRL-SHIFT-F</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <b>Help</b>
            </td>
          </tr>
          <tr>
            <td>Help</td>
            <td>F1</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>License</td>
            <td>CTRL-L</td>
          </tr>
          <tr>
            <td>---</td>
          </tr>
          <tr>
            <td>About</td>
            <td>CTRL-ALT-A</td>
          </tr>
        </tbody>
      </table>
    </div></div>

    <hr />
    <div class="c18">
    <a href="#top">Top</a> | 
    <a href="Guide.html">Table of Contents</a> | 
    <a href="Guide3.html">Previous</a> | 
    <a href="Guide5.html">Next</a> | 
    <a href="TopicIndex.html">Topic Index</a></div>
    <div class="c19">Copyright © @COPYYEAR@ @COPYRIGHT@</div>
  </body>
</html>
